<template>
  <view class="test">
    <text @click="showDrawer" type="primary" style="font-size: 35rpx">更多</text>
    <Drawer ref="showRight" mode="right" :mask-click="true" close="closeDrawer" :width="660">
      <view class="drawer-content">
        <scroll-view scroll-y style="height: 87vh">
          <view class="header">
            <text class="title" style="font-weight: bold; margin-bottom: 10rpx; font-size: 40rpx"
              >嘉宾筛选</text
            >
          </view>
          <!-- <SearchBar></SearchBar> -->
          <view class="search-bar">
            <input
              type="text"
              placeholder="按用户ID/昵称"
              v-model="searchQuery"
              class="search-input"
            />
            <button @click="search" class="search-button">
              <uni-icons type="search" size="30" @click="confirmFilters"></uni-icons>
            </button>
          </view>

          <!-- 其他选择器组件 -->
          <AgeRangePicker :ageRange="ageRange" @update:ageRange="updateAgeRange" />

          <HeightRangePicker :heightRange="heightRange" @update:heightRange="updateHeightRange" />

          <WeightRangePicker :weightRange="weightRange" @update:weightRange="updateWeightRange" />

          <WorkAreaPicker :workArea="workArea" @update:workArea="updateWorkArea" />

          <HukouAreaPicker :hukouArea="hukouArea" @update:hukouArea="updateHukouArea" />

          <MaritalStatusPicker
            :maritalStatuses="maritalStatuses"
            @update:maritalStatuses="updateMaritalStatuses"
          />

          <NationalityPicker
            :nationalities="nationalities"
            @update:nationalities="updateNationalities"
          />

          <!-- vip -->
          <VIP></VIP>

          <ChildStatusPicker :childStatus="childStatus" @update:childStatus="updateChildStatus" />

          <RevenuePicker :revenue="revenue" @update:revenue="updateRevenue" />

          <Degree :degree="degree" @update:degree="updateDegree" />

          <Occupation :occupations="occupations" @update:occupations="updateOccupations" />

          <Housingsituation
            :housingsituation="housingsituation"
            @update:housingsituation="updateHousingsituation"
          />

          <!-- 购车情况选择器组件 -->
          <CarStatusPicker :carStatus="carStatus" @update:carStatus="updateCarStatus" />

          <MarriageStatus
            :marriageStatus="marriageStatus"
            @update:marriageStatus="updateMarriageStatus"
          />
        </scroll-view>

        <!-- 按钮组，包括重置和确定按钮 -->
      </view>

      <button @click="resetFilters" class="reset-button">重置</button>
      <button @click="confirmFilters" class="confirm-button" style="color: white">确定</button>
    </Drawer>
  </view>
</template>

<script setup lang="ts">
import Drawer from './drawer.vue'
import { ref, defineEmits, toRaw } from 'vue'
import VIP from './components/VIPSection.vue'
// import SearchBar from './components/SearchBar.vue'
import AgeRangePicker from './components/AgeRangePicker.vue'
import HeightRangePicker from './components/HeightRangePicker.vue'
import WeightRangePicker from './components/WeightRangePicker.vue'
import WorkAreaPicker from './components/WorkAreaPicker.vue'
import HukouAreaPicker from './components/HukouAreaPicker.vue'
import MaritalStatusPicker from './components/MaritalStatusPicker.vue'
import NationalityPicker from './components/NationalityPicker.vue'
import ChildStatusPicker from './components/Children.vue'
import RevenuePicker from './components/Revenue.vue'
import Degree from './components/Degree.vue'
import Occupation from './components/Occupation.vue'
import Housingsituation from './components/Housingsituation.vue'
import CarStatusPicker from './components/Car.vue'
import MarriageStatus from './components/Married.vue' // 期望结婚时间组件
import eventManager from '@/components/EventManager'

// 引用uni-drawer组件的实例
const showRight = ref(null)

// 定义响应式变量用于存储筛选条件
const searchQuery = ref('')
const ageRange = ref<number[]>([])
const heightRange = ref<number[]>([])
const weightRange = ref<number[]>([])
const workArea = ref<string[]>([])
const hukouArea = ref<string[]>([])

const maritalStatuses = ref<string[]>([])
const nationalities = ref<string[]>([])
const childStatus = ref<string[]>([])
const revenue = ref<string[]>([])
const degree = ref<string[]>([])
const occupations = ref<string[]>([])
const housingsituation = ref<string[]>([])
const carStatus = ref<string[]>([])
const marriageStatus = ref<string[]>([])

// 动态宽度
const drawerWidth = ref('320')

// 显示抽屉的方法
const showDrawer = () => {
  showRight.value.open()
}

// 关闭抽屉的方法
const closeDrawer = () => {
  showRight.value.close()
}

// 处理搜索的方法
const handleSearch = (query: string) => {
  searchQuery.value = query
  console.log(`Search query received: ${query}`)
}

// 更新各个筛选条件的方法
const updateAgeRange = (range: number[]) => {
  ageRange.value = range
  if (ageRange.value.length) {
    console.log(`Selected age range: ${ageRange.value[0]} - ${ageRange.value[1]}`)
  }
}

const updateHeightRange = (range: number[]) => {
  heightRange.value = range
  if (heightRange.value.length) {
    console.log(`Selected height range: ${heightRange.value[0]}cm - ${heightRange.value[1]}cm`)
  }
}

const updateWeightRange = (range: number[]) => {
  weightRange.value = range
  if (weightRange.value.length) {
    console.log(`Selected weight range: ${weightRange.value[0]}kg - ${weightRange.value[1]}kg`)
  }
}

const updateWorkArea = (area: string[]) => {
  workArea.value = area
  if (workArea.value.length) {
    console.log(`Selected work area: ${workArea.value.join(' ')}`)
  }
}

const updateHukouArea = (area: string[]) => {
  hukouArea.value = area
  if (hukouArea.value.length) {
    console.log(`Selected hukou area: ${hukouArea.value.join(' ')}`)
  }
}

const updateMaritalStatuses = (statuses: string[]) => {
  maritalStatuses.value = statuses
  if (maritalStatuses.value.length) {
    console.log(`Selected marital statuses: ${maritalStatuses.value.join(', ')}`)
  }
}

const updateNationalities = (nats: string[]) => {
  nationalities.value = nats
  if (nationalities.value.length) {
    console.log(`Selected nationalities: ${nationalities.value.join(', ')}`)
  }
}

const updateChildStatus = (status: string[]) => {
  childStatus.value = status
  if (childStatus.value.length) {
    console.log(`Selected child status: ${childStatus.value.join(', ')}`)
  }
}

const updateRevenue = (revenues: string[]) => {
  revenue.value = revenues
  if (revenue.value.length) {
    console.log(`Selected revenue: ${revenue.value.join(', ')}`)
  }
}

const updateDegree = (gree: string[]) => {
  degree.value = gree
  if (degree.value.length) {
    console.log(`Selected degree: ${degree.value.join(', ')}`)
  }
}

const updateOccupations = (Occ: string[]) => {
  occupations.value = Occ
  if (occupations.value.length) {
    console.log(`Selected occupations: ${occupations.value.join(', ')}`)
  }
}

const updateHousingsituation = (Housing: string[]) => {
  housingsituation.value = Housing
  if (housingsituation.value.length) {
    console.log(`Selected housingsituation: ${housingsituation.value.join(', ')}`)
  }
}

// 更新购车情况的方法
const updateCarStatus = (status: string[]) => {
  carStatus.value = status
  if (carStatus.value.length) {
    console.log(`Selected car status: ${carStatus.value.join(', ')}`)
  }
}

const updateMarriageStatus = (status: string[]) => {
  marriageStatus.value = status
  if (marriageStatus.value.length) {
    console.log(`Selected marriage status: ${marriageStatus.value.join(', ')}`)
  }
}

// 重置筛选条件的方法
const resetFilters = () => {
  searchQuery.value = ''
  ageRange.value = []
  heightRange.value = []
  weightRange.value = []
  workArea.value = []
  hukouArea.value = []
  maritalStatuses.value = []
  nationalities.value = []
  childStatus.value = []
  revenue.value = []
  degree.value = []
  occupations.value = []
  housingsituation.value = []
  carStatus.value = []
  marriageStatus.value = []
}

const props = defineProps({ searchValue: Function })

// 确认筛选条件的方法
const confirmFilters = () => {
  // const logMessage: Record<string, string> = {}

  // 发布订阅模式
  eventManager.emit('myEvent')

  const logMessage: Record<string, string | string[]> = {}
  if (searchQuery.value) {
    logMessage.nickname = searchQuery.value
  }
  if (ageRange.value.length) {
    logMessage.age_range = `${ageRange.value[0]}-${ageRange.value[1]}`
  }
  if (heightRange.value.length) {
    logMessage.height_range = `${heightRange.value[0]}-${heightRange.value[1]}`
  }
  if (weightRange.value.length) {
    logMessage.weight_range = `${weightRange.value[0]}-${weightRange.value[1]}`
  }
  //工作地区
  // if (workArea.value.length) {
  //   logMessage.work_area = workArea.value.join(' ')
  // }
  if (workArea.value.length === 3) {
    logMessage.work_province = workArea.value[0]
    logMessage.work_city = workArea.value[1]
    logMessage.work_area = workArea.value[2]
  }
  //户口
  // if (hukouArea.value.length) {
  //   logMessage.hukou_area = hukouArea.value.join(' ')
  // }
  if (hukouArea.value.length === 3) {
    logMessage.my_province = hukouArea.value[0]
    logMessage.my_city = hukouArea.value[1]
    logMessage.my_area = hukouArea.value[2]
  }
  //婚姻
  if (maritalStatuses.value.length) {
    logMessage.marital_status = [...maritalStatuses.value]
  }
  //民族
  if (nationalities.value.length) {
    logMessage.ethnicity = [...nationalities.value]
  }
  //子女
  if (childStatus.value.length) {
    logMessage.children_status = [...childStatus.value]
  }
  // if (degree.value.length) {
  //   logMessage.degree = degree.value.join(', ')
  // }
  //最低月收入
  if (degree.value.length) {
    logMessage.minimum_income = [...degree.value]
  }
  //职业
  if (occupations.value.length) {
    logMessage.occupation = [...occupations.value]
  }
  //最低学历
  if (revenue.value.length) {
    logMessage.minimum_education = [...revenue.value]
  }
  //住房情况
  if (housingsituation.value.length) {
    logMessage.housing_status = [...housingsituation.value]
  }
  //购车情况
  if (carStatus.value.length) {
    logMessage.car_status = [...carStatus.value]
  }
  //期望结婚时间
  if (marriageStatus.value.length) {
    logMessage.marriage_timing = [...marriageStatus.value]
  }
  console.log('Filters confirmed:', logMessage)
  props.searchValue(logMessage)
  closeDrawer()
}

const emit = defineEmits<{
  (e: 'search', query: string): void
}>()

const search = () => {
  emit('search', searchQuery.value)
  console.log(`Search query: ${searchQuery.value}`)
}
</script>
<style>
.uni-drawer /deep/ .uni-drawer {
  background-color: red;
}
</style>
<style scoped>
.drawer-content {
  width: 660rpx;
}
.test {
  z-index: 1000;
}
.radio-group {
  display: flex;
  justify-content: space-evenly;
}

.radio-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160rpx;
  height: 80rpx;
  border: 2rpx solid #ff0000;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 28rpx;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  margin-left: 5rpx;
}

.radio-label.selected {
  background-color: #e0f7fa;
  color: #00acc1;
  border-color: #00acc1;
  border: 2rpx solid red;
}

.radio-label.selected::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 32rpx 26rpx 22rpx 20rpx;
  border-color: transparent rgb(1, 170, 190) rgb(1, 170, 190) transparent;
  border-radius: 0px;
  /* border: 1px solid red; */
}

.check-icon::after {
  /* content: '√'; */
  position: absolute;
  right: 2rpx;
  top: 60rpx;
  z-index: 1000;
  font-size: 28rpx;
  color: #ebebeb;
}

.drawer-content {
  padding: 32rpx;
  height: calc(100vh - 32px); /* 减去上下 padding */
  overflow-y: auto; /* 启用垂直滚动 */
  /* padding-bottom: 200px; */
  position: relative;
  box-sizing: border-box;
  z-index: 999;
  padding-bottom: 120rpx;
}

.button-group {
  z-index: 1000;
  display: flex;
  justify-content: space-evenly;
  margin-top: 32rpx;
  padding-top: 200rpx;
  padding-bottom: 120rpx;
  position: fixed;
  bottom: -25rpx;
  width: 100%;
  height: 75rpx;
}

.reset-button {
  position: fixed;
  bottom: 0;
  left: 60rpx;
  color: #c0c0c0;
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background-color: #fff;
  line-height: 70rpx;
}

.confirm-button {
  position: fixed;
  bottom: 0;
  right: 60rpx;
  color: #ddd;
  width: 200rpx;
  height: 70rpx;
  border-radius: 35rpx;
  background: linear-gradient(to right, #5ac8d5, #0daec2);
  line-height: 70rpx;
  z-index: 10000;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
}

.search-bar input {
  flex: 1;
  padding: 10rpx;
  border: none;
  border-radius: 8rpx;
  padding-right: 80rpx;
}

.search-bar input::placeholder {
  color: #ccc;
  opacity: 1;
}

.search-input {
  height: 80rpx;
  margin: 4rpx;
}

.search-button {
  position: absolute;
  right: 10rpx;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-button uni-icons {
  color: #007bff;
}
</style>
